<template>
  <div class="wrapper">
    <!-- 班次列表 -->
    <div class="bc">
      <el-button size="small"
        type="primary"
        @click="addGroup" v-has="'platoongroupaddchange'">新增班次</el-button>
      <table>
        <tr>
          <td>班次名称</td>
          <td>班次规则</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in platoonGroupRuleList"
          :key="item.id">
          <td>{{item.simple}}({{item.name}})</td>
          <td>{{item.time}}</td>
          <td>
            <el-button type="text"
              @click="editGroup(item)" v-has="'platoongroupaddchange'">编辑</el-button>
            <el-button type="text"
              @click="_deleteGroup(item.id)" v-has="'platoongroupdelete'">删除</el-button>
          </td>
        </tr>
      </table>
    </div>
    <!-- 周期排期 -->
    <div class="zq">
      <el-button size="small"
        type="primary"
        @click="addCycle" v-has="'platooncycleaddchange'">新增周期排期</el-button>
      <table>
        <tr>
          <td>周期名称</td>
          <td>周期规则</td>
          <td>天数</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in patoonCycleList"
          :key="item.id">
          <td>{{item.name}}</td>
          <td>{{item.ruleSimple.join('')}}</td>
          <td>{{item.day}}</td>
          <td>
            <el-button type="text"
              @click="editCycle(item)" v-has="'platooncycleaddchange'">编辑</el-button>
            <el-button type="text"
              @click="_deleteCycle(item.id)" v-has="'platooncycledelete'">删除</el-button>
          </td>
        </tr>
      </table>
    </div>
    <!-- 新增/编辑班次 -->
    <el-dialog :title="groupTitle"
      :visible.sync="groupDialogVisible"
      v-if="groupDialogVisible"
      width="400px">
      <el-form label-width="80px">
        <el-form-item label="班次名称">
          <el-input placeholder="请输入班次名称"
            maxlength="6"
            v-model="groupName"
            v-filterSpecialChar="groupName"></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-time-picker format="HH:mm"
            v-model="startTime"
            value-format="HH:mm"
            :editable="false"
            placeholder="请输入开始时间">
          </el-time-picker>

        </el-form-item>
        <el-form-item label="结束时间">
          <el-time-picker format="HH:mm"
            v-model="endTime"
            value-format="HH:mm"
            :editable="false"
            placeholder="请输入结束时间">
          </el-time-picker>
        </el-form-item>
      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="groupDialogVisible = false">取 消</el-button>
        <el-button type="primary"
          @click="groupSure">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增/编辑周期排班 -->
    <el-dialog :title="cycleTitle"
      :visible.sync="cycleDialogVisible"
      v-if="cycleDialogVisible"
      width="400px">
      <el-form label-width="80px">
        <el-form-item label="周期名称">
          <el-input placeholder="请输入周期名称"
            maxlength="10"
            v-model="cycleName"
            v-filterSpecialChar="cycleName"></el-input>
        </el-form-item>
        <el-form-item label="周期天数">
          <el-input-number v-model="number"
            controls-position="right"
            :min="1"
            :max="31"
            size="small"
            @change="change"></el-input-number>
        </el-form-item>
        <el-form-item>
          <ul>
            <li v-for="(item,index) in number"
              :key="index">
              <span>第{{index+1}}天：</span>
              <el-select placeholder="请选择班次"
                v-model="selectList[index]._value">
                <el-option v-for="i in pullList"
                  :value="i.id"
                  :key="i.id"
                  :label="i.time"></el-option>
              </el-select>
            </li>
          </ul>
        </el-form-item>
      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="cycleDialogVisible = false">取 消</el-button>
        <el-button type="primary"
          @click="cycleSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPlatoonList,
  updateGroup,
  updateCycle,
  getPullList,
  getCycleDayList,
  deleteCycle,
  deleteGroup
} from "@/public/js/setting";
export default {
  components: {},
  props: {},
  data() {
    return {
      platoonGroupRuleList: [],
      patoonCycleList: [],
      groupTitle: "新增班次",
      cycleTitle: "新增周期排班",
      groupDialogVisible: false,
      cycleDialogVisible: false,

      dayList: "",
      groupName: "",
      groupId: "",
      number: 1,
      pullList: [],
      selectList: [{ _value: "" }],
      fontNumber: 1,
      cycleName: "",
      cycleId: "",
      startTime: "",
      endTime: ""
    };
  },
  watch: {
    number(newVal, oldVal) {
      if (this.fontNumber >= newVal) {
        this.selectList.splice(newVal, 1);
        this.fontNumber = newVal;
      } else {
        this.selectList.push({ _value: "" });
        this.fontNumber = newVal;
      }
    }
  },
  computed: {},
  methods: {
    // 获取列表数据
    _getPlatoonList() {
      getPlatoonList().then(res => {
        this.platoonGroupRuleList = res.data.platoonGroupRuleList;
        this.patoonCycleList = res.data.patoonCycleList;
      });
    },
    // 新增班次
    addGroup() {
      this.groupTitle = "新增班次";
      this.groupDialogVisible = true;
      this.groupName = "";
      this.startTime = "";
      this.endTime = "";
      this.groupId = "";
    },
    // 编辑班次
    editGroup(item) {
      this.groupTitle = "编辑班次";
      this.groupName = item.name;

      this.startTime = new Date(item.upTime);
      this.endTime = new Date(item.lowerTime);
      this.groupId = item.id;
      this.groupDialogVisible = true;
    },
    // 班次保存
    groupSure() {
      if (!this.groupName) {
        this.$message.error("请输入班次名称");
        return false;
      }

      if (!this.startTime) {
          this.$message.error("请输入上班时间");
          return false;
      }
       if (!this.endTime) {
          this.$message.error("请输入下班时间");
          return false;
      }
      updateGroup({
        id: this.groupId,
        name: this.groupName,
        start: this.startTime,
        end: this.endTime
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "操作成功"
          });
          this.groupDialogVisible = false;
          this._getPlatoonList();
        }
      });
    },
    // 获取下拉数据
    _getPullList() {
      getPullList().then(res => {
        this.pullList = res.data.pullList;
      });
    },
    // 新增周期
    addCycle() {
      this.cycleName = "";
      this.number = 1;
      this.fontNumber = 1;
      this.cycleId = "";
      this.pullList = [];
      this.selectList = [
        {
          _value: ""
        }
      ];

      this._getPullList();
      setTimeout(() => {
        this.cycleDialogVisible = true;
      }, 20);
    },
    //deleteCycle,
    //deleteGroup
    // 删除班次
    _deleteGroup(id) {
      this.$confirm("此操作将永久删除该班次, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteGroup({ id }).then(res => {
          if (!res.data.errCode) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          }
          this._getPlatoonList();
        });
      });
    },
    // 删除周期排班
    _deleteCycle(id) {
      this.$confirm("此操作将永久删除该周期排班, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteCycle({ id }).then(res => {
          if (!res.data.errCode) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          }
          this._getPlatoonList();
        });
      });
    },
    // 获取周期排班每天信息
    _getCycleDayList() {
      getCycleDayList({ id: this.cycleId }).then(res => {
        let ruleList = res.data.ruleList;
        this.selectList = [];
        ruleList.forEach(item => {
          this.selectList.push({
            _value: item.ruleId
          });
        });
        this.cycleDialogVisible = true;
      });
    },
    change(val) {},
    // 编辑周期
    editCycle(item) {
      this.cycleTitle = "编辑周期排班";
      this.cycleName = item.name;
      this.cycleId = item.id;
      this.number = item.day;
      this._getPullList();
      this._getCycleDayList();
    },
    // 周期保存
    cycleSure() {
      let flag = false;
      let dayList = [];
      if (!this.cycleName) {
        this.$message.error("请输入周期名称");
        return false;
      }
      this.selectList.forEach((item, index) => {
        if (!item._value) {
          flag = true;
          return false;
        }
        dayList.push({
          day: index + 1,
          ruleId: item._value
        });
      });

      if (flag) {
        this.$message.error("请选择完整的天数班次");
        return false;
      }
      updateCycle({
        id: this.cycleId,
        name: this.cycleName,
        number: this.number,
        dayList: dayList
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "操作成功"
          });
          this.cycleDialogVisible = false;
          this._getPlatoonList();
        }
      });
      //
    }
  },
  created() {
    this._getPlatoonList();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.wrapper {
  table {
    border-collapse: collapse;
    text-align: center;
    margin-top: 20px;
  }
  tr.style {
    background: #f2f2f2;
  }
  table td,
  table th {
    border: 1px solid #cad9ea;
    color: #666;
    height: 30px;
    width: auto;
    padding: 0 40px;
    &.style {
      background: #f2f2f2;
    }
  }
  .zq {
    padding-top: 50px;
  }
}
</style>